* {
    padding: 0px;
    margin: 0px;
}

a {
    text-decoration: none;
}


.wrap {
    width: 750px;
    height: 550px;
    border: 1px solid black;
    margin: 0 auto;

    position: relative;

    .continer {
        width: 500px;
        height: 500px;
        transform: translate(25px,25px) rotateZ(-90deg);
        float: left;

        > div {
            width: 500px;
            height: 50px;

            > div {
                width: 50px;
                height: 50px;
                float: left;
                transition: all 0.5s;
                background: linear-gradient(135deg,greenyellow,yellowgreen);
    
            }
        }
    }

    .area {
        width: 200px;
        height: 500px;
        margin-top: 25px;
        float: right;
        background: skyblue;

        > span,a {
            width: 180px;
            height: 45px;
            background: #FF00FF;  
            color: #0000CD;
            display: block;
            line-height: 45px;
            margin: 50px auto 0;
            font-size: 25px;
            text-align: center;
            cursor: pointer;
        }
    }

    .end {
        width: 500px;
        height: 500px;
        transform: translate(25px,25px);
        display: none;
        position: absolute;
        left: 0;
        top: 0;

        .over {
            width: 300px;
            height: 250px;
            background: red;
            overflow: hidden;
            transform: translate(100px,125px);

            > span {
                width: 180px;
                height: 45px;
                background: #FF00FF;
                color: #0000CD;
                display: block;
                line-height: 45px;
                margin: 47px auto 0;
                font-size: 25px;
                text-align: center;
                cursor: pointer;
            }
        }
    }
}

